<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- 遍历数组数据 -->
				<li v-for="(item,index) in arr">{{item}}={{index}}</li>
				<li v-for="(key,value) in product">{{value}}=={{key}}</li>
			</ul>
		</div>
		<hr />
		<!-- 
		<div id="app2">
			<ul>
				<li v-for="(key,value) in product">{{key}}=={{value}}</li>
			</ul>
		</div> -->
		<div id="app2">
			<!-- 遍历Json数组数据 -->
			<!-- 要是用子集标签，来打印数据 -->
			<ul v-for="(item,index) in products">
				<li>{{item.id}}</li>
				<li>{{item.name}}</li>
				<li>{{item.price}}</li>
			</ul>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					// 数组格式数据
					arr: [1, 2, 3, 4, 5],
					product: {
						id: 1,
						name: 'test',
						price: 500
					}
				}
			});
			new Vue({
				el: '#app2',
				// json格式的数据
				data: {
					products: [{
							id: 1,
							name: '笔记本电脑',
							price: '5000',
						},
						{
							id: 2,
							name: '苹果电脑',
							price: '4000',
						}
					]
				}
			});
		</script>
	</body>
</html>
